import React from 'react'
import dynamic from 'dva/dynamic';
import { Route, Redirect } from 'dva/router'
import { connect } from 'dva'
import NoMatch from '../components/NoMatch'
import { Message } from 'antd';

/**解决组件动态加载路由问题的 util 方法。
 * app: dva 实例，加载 models 时需要
 * models: 返回 Promise 数组的函数，Promise 返回 dva model
 * component：返回 Promise 的函数，Promise 返回 React Component
 * 效果比如:router.js component:()=>import('./pages/IndexPage'),
 *  */
const dynamicCom = (app, models, component, routes, isAuthority, userInfo) => dynamic({
  app,
  models: () => models,//在router.js中的model传的什么这里就接收什么
  component: () =>
    component().then(res => {
      if (isAuthority) {//私有路由为true让它重定向至login.js
        //判断localStorage.user 没有数据就进入login.js
        // if(!userInfo.key){
        if (!localStorage.key || !localStorage.email) {
          Message.error('请先登录或注册!');
          return ()=> <Redirect to="/login" /> 
        }
      }
      const Component = res.default || res;
      // 把组件加载出来
      return props => <Component {...props} app={app} routes={routes} />
    })
});
//优化封装
function SubRoutes({ routes, component, app, model, isAuthority, userInfo }) {//接收router.js页面传入的route,之后在页面中使用
  //渲染路由
  //component 用于渲染 routes = {route.routes}传过来的路由
  //  触发私有路由isAuthority 
  return (
    <Route component={dynamicCom(
      app,
      model,
      component,
      routes,
      isAuthority,
      userInfo//私有路由传递至dynamicCom()
    )} />
  )

}
// 重定向组件
export function RedirectRoute({ routes, from, exact }) {
  const routeR = routes.filter(item => {//过滤出redirect
    return item.redirect;
  })
  //   对routeR返回(数组)如果没有值就输出一个传入的path路径
  const to = routeR.length ? routeR[0].path : routes[0].path;
  return <Redirect exact={exact} from={from} to={to} />
}
//    针对找不到的地址进行封装
export function NoMatchRoute({ status = 404 }) {
  return <Route render={props => (<NoMatch {...props} status={status} />)} />
}

// 让global数据和页面连接
export default connect(({ global }) => ({
  // 提取global中指定的数据
  userInfo: global.userInfo
}))(SubRoutes)